
import { useEffect, useState,useReducer } from "react"
import home from './Home.module.less'
import { Link } from "react-router-dom";

import ResumeTitleShow from './component/ResumeTitleShow'
import ResumeContent from "./component/ResumeContent"
import JobDescription from './component/JobDescription'

import {searchResumeList, searchTagList, searchRequireDescriptionList} from '../../api/index.js'
import resumeListReducer from './reducer/resumeListReducer.ts'

export default function Home(){
    // 查询数据
    useEffect( ()=>{
        console.log('主页数据查询中')
        async function getStore() {
           await updateResume()
           await updateTags()
           await updateRequireDescription()
        }
        getStore()
    },[])



    const [resumeList,dispatch] = useReducer(resumeListReducer,[])
    const [currentId,setCurrentId] = useState(1)
    const [tags,setTags] = useState([])
    const [requireDescription,setRequireDescription] = useState([])
    const [editFlag,setEditflag] = useState()


    const updateResume = async ()=>{
        let result = await searchResumeList()
        console.log('获取resume列表',result)
        dispatch({type:'reset',result:result})
    }

    const updateTags = async()=>{
         let tagResult = await searchTagList()
        setTags(tagResult)
    }
    const handleSetResumeList = (type,data)=>{
        switch(type){
            case 'add':
                dispatch({type:'add',...data})
                break;
            case 'update':
                dispatch({type:'update',...data})
                break;
            case 'delete':
                dispatch({type:'delete',...data})
                break;
        }
    }

    const updateRequireDescription = async()=>{
        console.log('获取require列表')
        let requireResult = await searchRequireDescriptionList()
        console.log('获取require列表',requireResult)

        setRequireDescription(requireResult)
    }

    return (
        <div className={home.home}>
            <div className={home.bar}>
                <span > <Link to={`manage`}>jd管理</Link> </span>
                <span style={{color:'#6b7775',fontSize:'14px'}}> 数据为浏览器端本地存储，删除缓存会导致数据丢失！请勿存储重要信息！ </span>
                <span > </span>
            </div>

            <div className={home.main}>
                <ResumeTitleShow 
                    initialActivedId={currentId}
                    editFlag={editFlag} 
                    onTabChange={(params)=>setCurrentId(params)}  
                    resumeList={resumeList} 
                    handleSetResumeList={handleSetResumeList}
                />
                <ResumeContent 
                    changeEditFlag = {(flag)=>{setEditflag(flag)}}
                    id={currentId}  
                    resumeList={resumeList}  
                    updateResume={updateResume}
                />
                <JobDescription tags={tags} requireDescription={requireDescription}/>
            </div>

        </div>
    )
}